React experimental_useFormState: Подобрено управление на формуляри в съвременните приложения

Управлението на формуляри е ключов аспект от изграждането на интерактивни и лесни за употреба уеб приложения. React, със своята компонентно-базирана архитектура, предоставя няколко начина за работа с формуляри. Въвеждането на Server Actions и последващите подобрения като experimental_useFormState революционизират начина, по който разработчиците подхождат към обработката на формуляри, особено при взаимодействие със сървърна логика. Този експериментален hook, част от непрекъснатото изследване на React на сървърни компоненти и действия, предлага оптимизиран и по-ефективен подход за управление на състоянието на формуляра и обработка на грешки.

Какво е experimental_useFormState?

experimental_useFormState е React hook, предназначен да опрости управлението на формуляри, особено в сценарии, при които взаимодействате със сървърни действия. Той предоставя механизъм за предаване на състоянието на формуляра между клиента и сървъра, което позволява по-безпроблемно потребителско изживяване и подобрена обработка на грешки. Интегрира се директно с React Server Components и Server Actions, позволявайки ефективно извличане и промяна на данни.

Преди да се потопим в спецификата, е важно да се отбележи, че този hook в момента е експериментален. Това означава, че API може да се промени в бъдещи версии. Поради това се препоръчва да се използва с повишено внимание в производствени среди и да се следи най-новата документация на React.

Защо да използваме experimental_useFormState?

Традиционното управление на формуляри в React често включва управление на състоянието на формуляра локално с помощта на hooks като useState или библиотеки като Formik или React Hook Form. Макар тези подходи да са ефективни за валидиране от страна на клиента и прости взаимодействия с формуляри, те могат да станат тромави, когато се занимаваме със сървърни операции като изпращане на данни и обработка на грешки. Ето няколко предимства, които experimental_useFormState предлага:

• Опростена интеграция със Server Actions: Hook-ът значително улеснява свързването на вашите формуляри със сървърни действия. Той се справя със сложността на предаването на данни към сървъра, управлението на състоянието на зареждане и показването на сървърни грешки.
• Подобрено потребителско изживяване: Чрез предаване на състоянието на формуляра между клиента и сървъра, experimental_useFormState позволява по-отзивчиво и интерактивно потребителско изживяване. Например, можете да предоставите незабавна обратна връзка на потребителя, докато формулярът се обработва на сървъра.
• Централизирана обработка на грешки: Hook-ът предоставя централизиран механизъм за обработка на грешки при валидиране на формуляра, както от страна на клиента, така и от страна на сървъра. Това опростява показването на грешки и осигурява последователно потребителско изживяване.
• Прогресивно подобрение: Използването на Server Actions в комбинация с experimental_useFormState поддържа прогресивно подобрение. Формулярът може да функционира дори ако JavaScript е деактивиран, осигурявайки базово изживяване за всички потребители.
• Намален boilerplate код: В сравнение с традиционните техники за управление на формуляри, experimental_useFormState намалява количеството на необходимия boilerplate код, правейки вашите компоненти по-чисти и по-лесни за поддръжка.

Как да използваме experimental_useFormState

За да използвате experimental_useFormState, първо трябва да се уверите, че използвате версия на React, която поддържа Server Actions (React 18 или по-нова). Също така ще трябва да активирате експерименталните функции във вашата React конфигурация. Това обикновено включва конфигуриране на вашия bundler (напр. Webpack, Parcel) за активиране на експерименталните функции.

Ето един основен пример за това как да използвате experimental_useFormState:

Пример: Прост формуляр за контакт

Нека създадем прост формуляр за контакт с полета за име, имейл и съобщение. Ще използваме experimental_useFormState, за да обработим изпращането на формуляра и да покажем евентуални грешки.

1. Дефинирайте Server Action:

Първо, трябва да дефинираме сървърно действие, което ще обработи изпращането на формуляра. Това действие ще получи данните от формуляра и ще извърши всяка необходима сървърна валидация и обработка (напр. изпращане на имейл).

// server-actions.js 'use server'; import { experimental_useFormState as useFormState } from 'react'; async function submitForm(prevState, formData) { // Симулираме валидация от страна на сървъра const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name) { return { error: 'Името е задължително' }; } if (!email) { return { error: 'Имейлът е задължителен' }; } if (!message) { return { error: 'Съобщението е задължително' }; } // Симулираме изпращане на имейл try { await new Promise(resolve => setTimeout(resolve, 1000)); // Симулираме мрежово забавяне console.log('Формулярът е изпратен успешно!'); return { success: true, message: 'Благодарим ви за съобщението!' }; } catch (error) { console.error('Грешка при изпращане на имейл:', error); return { error: 'Неуспешно изпращане на съобщение. Моля, опитайте отново.' }; } } export default submitForm;

2. Създайте React компонента:

Сега, нека създадем React компонента, който ще рендира формуляра и ще използва experimental_useFormState за управление на състоянието на формуляра.

// ContactForm.jsx 'use client'; import { experimental_useFormState as useFormState } from 'react'; import submitForm from './server-actions'; function ContactForm() { const [state, formAction] = useFormState(submitForm, null); return (

Име:

Имейл:

Съобщение:

Изпрати {state?.error &&

{state.error}

} {state?.success &&

{state.message}

}

); } export default ContactForm;

Обяснение:

• 'use client';: Тази директива казва на React, че това е Client Component. Това е необходимо, защото experimental_useFormState може да се използва в рамките на Client Components за взаимодействие със Server Actions.
• useFormState(submitForm, null): Този hook приема два аргумента: сървърното действие, което да бъде изпълнено (submitForm) и първоначалното състояние (null в този случай). Той връща масив, съдържащ текущото състояние на формуляра и функция за задействане на сървърното действие. Върнатият `formAction` трябва да бъде подаден на `action` prop на формата.
• form action={formAction}: Това свързва сървърното действие с изпращането на формуляра. Когато формулярът бъде изпратен, действието submitForm ще бъде изпълнено на сървъра.
• state?.error: Това показва всички съобщения за грешки, върнати от сървърното действие.
• state?.success: Това показва всички съобщения за успех, върнати от сървърното действие.
• state?.pending: Това автоматично се задава на true по време на изпълнение на сървърното действие, което ви позволява да деактивирате бутона за изпращане.

Подробно обяснение на кода

Нека разгледаме кода стъпка по стъпка, за да разберем как работи.

Server Action (server-actions.js)

• 'use server';: Тази директива маркира файла като съдържащ сървърни действия. От решаващо значение е React да разбере, че функциите в този файл трябва да се изпълняват на сървъра.
• async function submitForm(prevState, formData): Това дефинира функцията за сървърно действие. Тя приема два аргумента: prevState (предишното състояние на формуляра) и formData (инстанция на FormData, съдържаща данните от формуляра).
• formData.get('name'), formData.get('email'), formData.get('message'): Тези редове извличат данните от формуляра от обекта FormData. Аргументът на get() е атрибутът name на съответното поле за въвеждане във формуляра.
• Валидация от страна на сървъра: Кодът извършва основна валидация от страна на сървъра, за да гарантира, че всички задължителни полета са попълнени. Ако липсват полета, той връща обект с грешка на клиента.
• Симулиране на изпращане на имейл: Кодът симулира изпращане на имейл, като използва await new Promise(resolve => setTimeout(resolve, 1000)). Това въвежда забавяне от 1 секунда, за да се симулира мрежова латентност. В реално приложение бихте заменили това с действителна логика за изпращане на имейли (напр. с Nodemailer или SendGrid).
• Обработка на грешки: Кодът включва блок try...catch за обработка на всякакви грешки, възникнали по време на процеса на изпращане на имейл. Ако възникне грешка, тя се записва в конзолата и се връща обект с грешка на клиента.
• Връщане на състоянието: Сървърното действие връща обект, съдържащ или съобщение за грешка, или съобщение за успех. Този обект става новото състояние, което се предава на клиентския компонент чрез hook-а useFormState.

Клиентски компонент (ContactForm.jsx)

• 'use client';: Тази директива показва, че този компонент е клиентски компонент и може да използва клиентски hooks като useState и useEffect. Тя е задължителна за използване на hooks и взаимодействие с DOM.
• const [state, formAction] = useFormState(submitForm, null);: Този ред извиква hook-а experimental_useFormState. Той предава сървърното действие submitForm като първи аргумент и първоначалното състояние (null) като втори аргумент. Hook-ът връща масив, съдържащ текущото състояние на формуляра (state) и функция за задействане на сървърното действие (formAction).
• <form action={formAction}>: Това задава атрибута action на формуляра на функцията formAction. Когато формулярът бъде изпратен, тази функция ще бъде извикана, което ще задейства сървърното действие submitForm.
• <input type="text" id="name" name="name" />, <input type="email" id="email" name="email" />, <textarea id="message" name="message"></textarea>: Това са полетата за въвеждане на формуляра. Атрибутите name на тези полета са важни, защото те определят как данните се достъпват в сървърното действие, използвайки formData.get('name'), formData.get('email') и formData.get('message').
• <button type="submit" disabled={state?.pending}>Изпрати</button>: Това е бутонът за изпращане на формуляра. Атрибутът disabled={state?.pending} деактивира бутона, докато формулярът се изпраща на сървъра, предотвратявайки многократното му изпращане от потребителя.
• {state?.error && <p style={{ color: 'red' }}>{state.error}</p>}: Това условно рендира съобщение за грешка, ако има грешка в състоянието на формуляра. Съобщението за грешка се показва в червено.
• {state?.success && <p style={{ color: 'green' }}>{state.message}</p>}: Това условно рендира съобщение за успех, ако формулярът е изпратен успешно. Съобщението за успех се показва в зелено.

Разширено използване и съображения

Докато горният пример демонстрира основното използване на experimental_useFormState, има няколко други аспекта, които трябва да се вземат предвид при използването му в по-сложни приложения.

Оптимистични актуализации

Можете да приложите оптимистични актуализации, за да осигурите по-отзивчиво потребителско изживяване. Оптимистичните актуализации включват незабавно актуализиране на потребителския интерфейс, след като потребителят изпрати формуляра, като се приема, че сървърното действие ще бъде успешно. Ако сървърното действие се провали, можете да върнете актуализацията и да покажете съобщение за грешка.

// Пример за оптимистични актуализации async function submitForm(prevState, formData) { // Оптимистично актуализиране на потребителския интерфейс // (Това обикновено би включвало актуализиране на състоянието на списък или таблица) const id = Date.now(); // Временно ID return { optimisticUpdate: { id: id, name: formData.get('name'), email: formData.get('email'), } } } // Във вашия клиентски компонент: const [state, formAction] = useFormState(submitForm, null); // Състояние, в което рендирате оптимистичната актуализация const [items, setItems] = useState([]); useEffect(()=>{ if (state && state.optimisticUpdate) { setItems(prev => [...prev, state.optimisticUpdate]); } }, [state])

В този опростен пример, сървърното действие връща свойство optimisticUpdate. В клиентския компонент ние го извличаме и го използваме, за да го добавим към масив, рендиран в нашето приложение. Например, това може да представлява добавяне на нов коментар към списък с коментари в публикация в блог.

Обработка на грешки

Ефективната обработка на грешки е от решаващо значение за доброто потребителско изживяване. experimental_useFormState улеснява обработката на грешки, възникнали по време на изпращане на формуляра. Можете да показвате съобщения за грешки на потребителя и да предоставяте насоки как да ги коригира.

Ето някои добри практики за обработка на грешки:

• Предоставяйте ясни и конкретни съобщения за грешки: Съобщенията за грешки трябва да бъдат ясни, кратки и специфични за възникналата грешка. Избягвайте общи съобщения за грешки като „Възникна грешка.“
• Показвайте съобщения за грешки близо до съответните полета за въвеждане: Показвайте съобщения за грешки близо до полетата за въвеждане, които са причинили грешките. Това улеснява потребителя да разбере кои полета трябва да бъдат коригирани.
• Използвайте визуални знаци за подчертаване на грешките: Използвайте визуални знаци като червен текст или рамки, за да подчертаете полетата за въвеждане, които имат грешки.
• Предоставяйте предложения за коригиране на грешките: Ако е възможно, предоставяйте предложения за коригиране на грешките. Например, ако потребителят въведе невалиден имейл адрес, предложете правилния формат.

Съображения за достъпност

При изграждането на формуляри е важно да се вземе предвид достъпността, за да се гарантира, че вашите формуляри са използваеми от хора с увреждания. Ето някои съображения за достъпност, които трябва да имате предвид:

• Използвайте семантичен HTML: Използвайте семантични HTML елементи като <label>, <input> и <textarea>, за да структурирате вашите формуляри. Това улеснява помощните технологии да разберат структурата на формуляра.
• Осигурете етикети за всички полета за въвеждане: Използвайте елемента <label>, за да осигурите етикети за всички полета за въвеждане. Атрибутът for на елемента <label> трябва да съвпада с атрибута id на съответното поле за въвеждане.
• Използвайте ARIA атрибути: Използвайте ARIA атрибути, за да предоставите допълнителна информация за елементите на формуляра на помощните технологии. Например, можете да използвате атрибута aria-required, за да укажете, че дадено поле за въвеждане е задължително.
• Осигурете достатъчен контраст: Уверете се, че има достатъчен контраст между текста и цвета на фона. Това улеснява хората с увредено зрение да четат формуляра.
• Тествайте с помощни технологии: Тествайте вашите формуляри с помощни технологии като екранни четци, за да се уверите, че са използваеми от хора с увреждания.

Интернационализация (i18n) и локализация (l10n)

Когато създавате приложения за глобална аудитория, интернационализацията (i18n) и локализацията (l10n) са от решаващо значение. Това включва адаптиране на вашето приложение към различни езици, култури и региони.

Ето някои съображения за i18n и l10n при използване на experimental_useFormState:

• Локализирайте съобщенията за грешки: Локализирайте съобщенията за грешки, които се показват на потребителя. Това гарантира, че съобщенията за грешки се показват на предпочитания от потребителя език.
• Поддържайте различни формати за дата и числа: Поддържайте различни формати за дата и числа въз основа на локала на потребителя.
• Обработвайте езици, които се пишат отдясно наляво: Ако вашето приложение поддържа езици, които се пишат отдясно наляво (напр. арабски, иврит), уверете се, че оформлението на формуляра се показва правилно на тези езици.
• Използвайте библиотека за превод: Използвайте библиотека за превод като i18next или react-intl, за да управлявате вашите преводи.

Например, може да използвате речник за съхранение на вашите съобщения за грешки и след това да ги извличате въз основа на локала на потребителя.

// Пример с i18next import i18next from 'i18next'; i18next.init({ resources: { en: { translation: { "name_required": "Името е задължително", "email_required": "Имейлът е задължителен", } }, fr: { translation: { "name_required": "Името е задължително", "email_required": "Имейлът е задължителен", } } }, lng: 'bg', // Променено на 'bg' за примера fallbackLng: 'bg', // Променено на 'bg' за примера interpolation: { escapeValue: false // react вече предпазва от xss } }); // Във вашето сървърно действие: if (!name) { return { error: i18next.t("name_required") }; }

Този пример използва i18next за управление на преводи. Функцията i18next.t() се използва за извличане на преведеното съобщение за грешка въз основа на локала на потребителя.

Глобални съображения и добри практики

При разработването на уеб приложения за глобална аудитория трябва да се вземат предвид няколко ключови съображения, за да се гарантира безпроблемно и приобщаващо потребителско изживяване. Тези съображения обхващат различни области, включително достъпност, културна чувствителност и оптимизация на производителността.

Часови зони

Когато работите с дати и часове, е изключително важно да се борави правилно с часовите зони. Потребителите може да се намират в различни часови зони, така че трябва да гарантирате, че датите и часовете се показват в местната часова зона на потребителя.

Ето някои добри практики за работа с часови зони:

• Съхранявайте дати и часове в UTC: Съхранявайте дати и часове в UTC (Координирано универсално време) във вашата база данни. Това гарантира, че датите и часовете са последователни във всички часови зони.
• Използвайте библиотека за часови зони: Използвайте библиотека за часови зони като Moment.js или Luxon, за да конвертирате дати и часове в местната часова зона на потребителя.
• Позволете на потребителите да посочат своята часова зона: Позволете на потребителите да посочат своята часова зона в настройките на профила си. Това ви позволява да показвате дати и часове в предпочитаната от тях часова зона.

Валути

Ако вашето приложение се занимава с финансови трансакции, трябва да поддържате различни валути. Потребителите може да се намират в различни държави с различни валути.

Ето някои добри практики за работа с валути:

• Съхранявайте цените в една и съща валута: Съхранявайте цените в една и съща валута (напр. USD) във вашата база данни.
• Използвайте библиотека за конвертиране на валути: Използвайте библиотека за конвертиране на валути, за да преобразувате цените в местната валута на потребителя.
• Показвайте цените с правилния валутен символ: Показвайте цените с правилния валутен символ въз основа на локала на потребителя.
• Предоставете опции на потребителите да избират своята валута: Позволете на потребителите да избират предпочитаната от тях валута.

Културна чувствителност

Важно е да бъдете културно чувствителни, когато разработвате уеб приложения за глобална аудитория. Това означава да сте наясно с различните културни норми и ценности и да избягвате всякакво съдържание, което би могло да бъде обидно или нечувствително.

Ето няколко съвета за културна чувствителност:

• Избягвайте използването на идиоми или жаргон: Избягвайте използването на идиоми или жаргон, които може да не бъдат разбрани от хора от други култури.
• Бъдете внимателни с изображенията и символите: Бъдете внимателни с изображенията и символите, които използвате във вашето приложение. Някои изображения и символи могат да имат различно значение в различните култури.
• Уважавайте различните религиозни вярвания: Уважавайте различните религиозни вярвания и избягвайте всякакво съдържание, което би могло да се счита за обидно за религиозни групи.
• Бъдете наясно с различните културни норми: Бъдете наясно с различните културни норми и ценности. Например, в някои култури се счита за невъзпитано да се прави директен зрителен контакт.

Оптимизация на производителността за глобална аудитория

Потребителите по света имат различни скорости на интернет връзката и възможности на устройствата. Оптимизирането на вашето приложение за производителност е от решаващо значение, за да се осигури гладко и отзивчиво изживяване за всички потребители, независимо от тяхното местоположение или устройство.

• Мрежи за доставка на съдържание (CDNs): Използвайте CDN, за да разпространявате активите на вашето приложение (напр. изображения, JavaScript, CSS) на сървъри по целия свят. Това намалява латентността за потребители, които се намират далеч от вашия основен сървър.
• Оптимизация на изображения: Оптимизирайте изображенията, като ги компресирате и използвате подходящи файлови формати (напр. WebP). Това намалява размера на файловете на изображенията и подобрява времето за зареждане на страницата.
• Разделяне на кода (Code Splitting): Използвайте разделяне на кода, за да разделите приложението си на по-малки части, които могат да се зареждат при поискване. Това намалява първоначалното време за зареждане на приложението.
• Кеширане: Използвайте кеширане, за да съхранявате често достъпвани данни в браузъра или на сървъра. Това намалява броя на заявките, които приложението трябва да направи към сървъра.
• Минификация и групиране (Bundling): Минифицирайте и групирайте вашите JavaScript и CSS файлове, за да намалите техния размер.

Алтернативи на experimental_useFormState

Въпреки че experimental_useFormState предлага убедителен подход към управлението на формуляри със Server Actions, е важно да сте наясно с алтернативни решения, особено като се има предвид, че все още е в експериментална фаза. Ето няколко популярни алтернативи:

• React Hook Form: React Hook Form е производителна и гъвкава библиотека за формуляри, която използва неконтролирани компоненти. Тя е известна с минималните си пререндерирания и отличната си производителност. Интегрира се добре с библиотеки за валидация като Yup и Zod.
• Formik: Formik е популярна библиотека за формуляри, която опростява управлението на състоянието, валидацията и изпращането на формуляри. Тя предоставя API на по-високо ниво от React Hook Form и е добър избор за сложни формуляри.
• Redux Form: Redux Form е библиотека за формуляри, която се интегрира с Redux. Тя е добър избор за приложения, които вече използват Redux за управление на състоянието.
• Използване на useState и useRef: За прости формуляри можете също да управлявате състоянието на формуляра директно, като използвате hook-а useState на React и достъпвате стойностите на формуляра с useRef. Този подход изисква повече ръчна обработка, но може да бъде подходящ за основни формуляри, където искате по-фин контрол.

Заключение

experimental_useFormState представлява значителна стъпка напред в управлението на формуляри в React, особено когато се комбинира със Server Actions. Той предлага опростен и по-ефективен начин за обработка на състоянието на формуляра, взаимодействие със сървърна логика и подобряване на потребителското изживяване. Въпреки че все още е в експериментална фаза, си струва да се проучи за нови проекти и да се обмисли за съществуващи такива, докато узрява. Не забравяйте да следите най-новата документация и добри практики на React, за да сте сигурни, че използвате hook-а ефективно и отговорно.

Като разбирате принципите, очертани в това ръководство, и ги адаптирате към вашите специфични нужди, можете да създадете здрави, достъпни и глобално ориентирани уеб приложения, които предоставят превъзходно потребителско изживяване на потребители по целия свят. Възприемането на тези добри практики не само подобрява използваемостта на вашите приложения, но също така демонстрира ангажимент към приобщаване и културна чувствителност, което в крайна сметка допринася за успеха и обхвата на вашите проекти в глобален мащаб.

С продължаващото развитие на React, инструменти като experimental_useFormState ще играят все по-важна роля в изграждането на модерни, рендирани на сървъра React приложения. Разбирането и използването на тези инструменти ще бъде от съществено значение, за да останете в крак с тенденциите и да предоставяте изключителни потребителски изживявания.